<template>
  <div class="StockWidth f-cb" :class="zixuanActive ? 'active' : ''">
    <div class="StockContent">
      <ul class="f-cb stockList">
        <li
          v-for="(item, index) in list"
          :key="index"
          :class="ListKey == index ? 'on' : ''"
          @click="itemClick(index)"
        >
          <div class="tab_item" v-if="index != 4 && item.num">
              {{`${item.name}(${item.num})`}}
          </div>
          <div class="tab_item" v-else>
              {{item.name}}
          </div>
        </li>
      </ul>
      <div class="Refresh" @click="reload"></div>
      <zixuan-list ref="zixuans" :sortList="zixuanLists" @getListNum="getListNum" @ListClick="ListClick"></zixuan-list>
    </div>
    <div class="StockRight fr" v-if="zixuanActive">
      <AccountRight
        :StockData="StockData"
        :SearchShowIs="SearchShowIs"
        @closeClick="closeClick"
      ></AccountRight>
    </div>
    <div></div>
  </div>
</template>

<script>
import AccountRight from "@/components/account/right/AccountRight.vue";
import zixuanList from "./zixuan_list.vue";
export default {
  components: {
    AccountRight,
    zixuanList,
  },
  inject: ["reload"],
  data() {
    return {
      list: [
        {
          name: this.$t('zixuanStock.zixuan_All.56hzzw3tnao0'),
        },
        {
          name: this.$t('zixuanStock.zixuan_All.56hzzw3tnrw0'),
        },
        {
          name: this.$t('zixuanStock.zixuan_All.56hzzw3tnwc0'),
        },
        {
          name: this.$t('zixuanStock.zixuan_All.56hzzw3to2k0'),
        },
        {
          name: this.$t('zixuanStock.zixuan_All.56hzzw3to5k0'),
        },
      ],
      zixuanLists: {
        toggleShow: true,
        order: ["", "DESC", "ASC"],
        name: "order",
        url: "/user.v1/optional/index", // 
        submit: {
          type: "",
          field: "gain",
          sort: "DESC",
          isPositions: 0
        },
      },
      ListKey: 0,
      value: "",
      zixuanActive: this.$store.state.index.zixuanActive,
      StockData: {},
      SearchShowIs: false,
    };
  },
  mounted() {
  },
  methods: {
    // 切换tabs
    itemClick(index) {
      console.log(index, "ListClick");
      this.ListKey = index;
      switch(index) {
        case 0:
        this.zixuanLists.submit.type = "";
        // 是否持仓的判断
        this.zixuanLists.submit.isPositions = 0;
        break;
        case 1:
        this.zixuanLists.submit.type = "HK";
        this.zixuanLists.submit.isPositions = 0;
        break;
        case 2:
        this.zixuanLists.submit.type = "US";
        this.zixuanLists.submit.isPositions = 0;
        break;
        case 3:
        this.zixuanLists.submit.type = "CN";
        this.zixuanLists.submit.isPositions = 0;
        break;
        case 4:
        this.zixuanLists.submit.type = "";
        this.zixuanLists.submit.isPositions = 1;
        break;
        default:
        this.zixuanLists.submit.type = "";
        this.zixuanLists.submit.isPositions = 0;
      }
      this.$refs.zixuans.tableData = [];
      this.$refs.zixuans.getdata();
    },
    // 打开右侧交易框
    closeClick() {
      this.$store.dispatch("SetZixuanActive", false);
    },
    ListClick() {
      console.log(this.$t('zixuanStock.zixuan_All.56hzzw3to8k0'))
      this.$store.dispatch("SetZixuanActive", true);
    },
    // 获取自选股分类数量
    getListNum(group) {
      this.$set(this.list[0],"num",group.totalNum);
      this.$set(this.list[1],"num",group.HKNum);
      this.$set(this.list[2],"num",group.USNum);
      this.$set(this.list[3],"num",group.CNNum);
      console.log(this.list,group, this.$t('zixuanStock.zixuan_All.56hzzw3tobg0'))
    }
  },
  watch: {
    $route(to, from) {
      // this.ListKey = this.$route.meta.index;
      // if(to.params.id && this.ListKey==5){
      //   this.value = to.params.id
      // }
    },
    ListKey(val) {
      this.ListKey = val;
    },
    "$store.state.index.zixuanActive": {
      handler(val, old) {
        this.zixuanActive = val;
        console.log(val, "zixuanActive");
      }
    }
  },
  computed: {
    zixuanList() {
      return this.$store.state.wsModel.zixuanList;
    },
  }
};
</script>

<style lang="less">
@import "~@/assets/less/cascader.less";
.StockWidth {
  width: 100%;
  height: 100%;
  background: @deepBg;
  overflow: hidden;
}
.StockContent {
  background: @deepBg;
  width: 100%;
  height: 100%;
  overflow: auto;
  .stockList {
    width: 100%;
    border-bottom: 1px solid @LightBorderLine;
    li {
      float: left;
      min-width: 90px;
      position: relative;
      line-height: 40px;
      font-size: 12px;
      color: @fbSix;
      text-align: center;
      .tab_item {
        color: @fbSix;
        display: block;
        width: 100%;
        cursor: pointer;
      }
    }
    li:after {
      content: "";
      background: @hoverColor;
      width: 12px;
      height: 2px;
      position: absolute;
      bottom: -1px;
      left: 50%;
      margin-left: -6px;
      opacity: 0;
    }
    li.on .tab_item.one,
    li:hover .tab_item.one,
    li.on .tab_item,
    li:hover .tab_item {
      color: @hoverColor;
    }
    li.on:after {
      opacity: 1;
    }
  }
  .Refresh {
    cursor: pointer;
    width: 22px;
    height: 22px;
    position: absolute;
    top: 60px;
    right: 20px;
    background: url(~@/assets/img/icon_sx.png) no-repeat center;
    background-size: 22px;
  }
}
.StockRight {
  width: 0;
  height: 100%;
  overflow: hidden;
}
.StockWidth.active {
  .StockRight {
    width: 380px;
    float: right;
  }
  .StockContent {
    width: calc(100% - 380px);
    float: left;
  }
}
</style>